<template>
    <fieldset>
        <legend>按钮鉴权</legend>

        <!-- 内容界面 -->
        <div class="content" v-if="enter">
            <p>列表展示</p>
            <button @click="esc">退出登录</button>
            <button @click="getList">获取列表</button>
            <h3>
                <img :src="userInfo.headimgurl" alt="" width="50">
                昵称:
                <a href="">{{userInfo.nickname}}</a>
            </h3>
            <ul>
                <li v-for="item in lists" :key="item._id">
                    <b>{{item.name}}</b>
                    <div>
                        <button v-has:read="permissionBtns">查看</button>
                        <button v-has:edit="permissionBtns">修改</button>
                        <button v-has:delete="permissionBtns">删除</button>
                        <button v-has:add="permissionBtns">增加</button>
                    </div>
                </li>
            </ul>
        </div>


        <!-- 登录界面 -->
        <div class="login" v-else>
            <p>请登入</p>
            <div>
                <label for="username">用户名:</label>
                <input type="text" v-model="username">
            </div>
            <div>
                <label for="password">密码:&nbsp;&nbsp;&nbsp;</label>
                <input type="password" v-model="password">
            </div>
            <button @click="login">登录</button>
        </div>
    </fieldset>
</template>



<script>
    export default{
        data(){
            return {
                enter:false,
                username:"",
                password:"",
                userInfo:{},
                lists:[],
                permissionBtns:[]

            }
        },
        methods:{
            login(){
                fetch('http://chst.vip/users/login',{
                    method:'post',
                    headers:{'content-type':'application/json'},
                    body:JSON.stringify({username:this.username,password:this.password})

                })
                    .then(body => body.json())
                    .then(res => {
                        if(res.state){
                            this.enter = true;

                            this.userInfo = res.userInfo;

                            sessionStorage.setItem('user-token',res.token)

                            this.permissionBtns = res.permission.buttons;
                            // console.log(res)

                            this.getList()
                        }else{
                            alert(res.msg)
                        }
                    })
            },
            getList(){
                fetch('http://chst.vip/students/getstulist?count=10',{
                    headers:{'authorization':sessionStorage.getItem('user-token')}
                })
                    .then(body => body.json())
                    .then(res => {
                        if(res.state){
                            this.lists = res.data;
                        }else{
                            alert(res.msg)
                        }
                    })
            },
            esc(){
                this.enter = false;
                this.username = "";
                this.password = "";
            }
        },
        directives:{
            has:{
                inserted(el,binding){
                    let button = binding.arg;

                    let userButton = binding.value;

                    let hasButton = userButton.includes(button);

                    if(!hasButton){
                        el.parentNode.removeChild(el)
                    }
                }
            }
        }
    }



</script>


<style scoped>
#box{
    width: 500px;
}
a{
    text-decoration: none;
}
fieldset{
    border: 0;
    outline: 0;
    border: 1px solid green;
}
legend{
    color: green;
}
ul{
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 1px solid green;
}
li{
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* border: 1px solid deeppink; */
    margin: 10px;
    max-width: 500px;
}
.login p{
    color: #333;
    font-size: 20px;
    font-weight: 900;
}
.login div{
    margin-bottom: 10px;
}
.login button{
    width: 60px;
    height: 26px;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
    background-color: rgb(75, 118, 10);
    border: 0;
    border-radius: 4px;
}
.content p:nth-of-type(1){
    font-size: 20px;
    font-weight: 900;
    color: #333;
}
.content button{
    /* width: 60px; */
    height: 26px;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
    background-color: rgb(75, 118, 10);
    border: 0;
    border-radius: 4px;
    margin-right: 5px;
}
</style>


